<template>
  <div class="ticktbox">
    <p class="left-title">选择票种</p>
    <div class="ticktitem-box flex">
      <div
        class="ticktitem"
        :class="currentIndex === item.id ? 'curt' : ''"
        @click="setcur(item)"
        v-for="item in ticket"
        :key="item.id"
      >
        <p class="ticktitem-title">
          <span>{{ item.cnName }} </span>
          <span class="ticktitem-num">￥ {{ item.showPrice }}</span>
        </p>
        <p class="ticktitem-text" v-if="item.remark">{{ item.remark }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import { getReservedateListByDate, getDefaultSchedules } from '@/http/protocol'
import { mapMutations } from 'vuex'

console.log(getReservedateListByDate)
export default {
  name: 'ticket',
  data () {
    return {
      ticket: [],
      currentIndex: null
    }
  },
  methods: {
    ...mapMutations('ticketinfo', ['setTicket']),

    setcur (item) {
      if (item.id !== this.currentIndex) {
        this.currentIndex = item.id
        this.setTicket({ ...item })
      }
    },
    async getDefaultSchedules () {
      const res = await getDefaultSchedules()
      // console.log(res)
      if (res.success) {
        // console.log(res.data)
        this.ticket = res.data || []
        if (this.ticket.length > 0) {
          this.setcur(this.ticket[0])
        }
      } else {
        this.$err(res.msg)
      }
    }
  },
  mounted () {
    this.getDefaultSchedules()
  }
}
</script>

<style scoped lang="less">
.ticktbox {
  .left-title {
    font-size: 15px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #333333;
    line-height: 21px;
  }
  .ticktitem-box {
    padding-top: 18px;
    width: 100%;
    flex-wrap: wrap;

    .ticktitem {
      text-align: center;
      width: 422px;
      min-height: 72px;
      padding: 14px;
      border-radius: 2px;
      border: 1px solid #e6e6e6;
      margin-bottom: 14px;

      &:last-child {
        // margin-bottom: 0;
      }
         &:hover {
       background: rgba(0, 151, 105, 0.1);
      border-radius: 2px;
      border: 1px solid #009769;
      .ticktitem-title {
        color: #009769;
      }
    }
      cursor: pointer;
      .ticktitem-title {
        font-size: 14px;
        font-weight: 600;
        color: #333333;
        line-height: 20px;
        padding-bottom: 6px;
      }
      .ticktitem-num {
        font-size: 14px;
        font-weight: 400;
        color: #fb6d21;
        line-height: 20px;
      }
      .ticktitem-text {
        font-size: 12px;
        font-weight: 400;
        color: #999999;
        line-height: 17px;
      }

      &:nth-child(odd) {
        margin-right: 20px;
      }
    }
    .curt {
      background: rgba(0, 151, 105, 0.1);
      border-radius: 2px;
      border: 1px solid #009769;
      .ticktitem-title {
        color: #009769;
      }
    }
  }
}
</style>
